<html>
  <head>
    <title>Itowns - vector-tiles 2d </title>

        <script type="importmap">
        {
            "imports": {
                "itowns": "../dist/itowns.js",
                "debug": "../dist/debug.js",
                "dat": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js",
                "GuiTools": "./jsm/GUI/GuiTools.js",
                "LoadingScreen": "./jsm/GUI/LoadingScreen.js",
                "itowns_widgets": "../dist/itowns_widgets.js",
                "three": "https://unpkg.com/three@0.170.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.170.0/examples/jsm/"
            }
        }
        </script>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="stylesheet"
      type="text/css"
      href="css/example.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="css/LoadingScreen.css"
    />


  </head>
  <body>
    <div id="viewerDiv"></div>
    <script src="js/GUI/LoadingScreen.js"></script>
    <script type="module">

      import GuiTools from 'GuiTools';
      import * as THREE from 'three';
      import * as itowns from 'itowns';
      import * as debug from 'debug';
      import * as itowns_widgets from 'itowns_widgets';

      const typeView = 'Planar';
      // const typeView = 'Globe';

      // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
      var viewerDiv = document.getElementById('viewerDiv');
      let view;

      if (typeView === 'Globe') {
        const coord = new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712); // Paris
        // const coord = new itowns.Coordinates("EPSG:4326", 60.599525, 56.834341); // Yekaterinburg
        const placement = {
          coord,
          range: 950000,
        };
        view = new itowns.GlobeView(viewerDiv, placement);
      } else if (typeView === 'Planar') {
        // Define geographic extent: CRS, min/max X, min/max Y
        var extent = new itowns.Extent(
            'EPSG:3857',
            -20037508.342789244, 20037508.342789244,
            -20037508.342789255, 20037508.342789244);

        // Instanciate PlanarView
        view = new itowns.PlanarView(viewerDiv, extent, {
            maxSubdivisionLevel: 20,
            controls: {
                // We do not want the user to zoom out too much
                maxAltitude: 40000000,
                // We want to keep the rotation disabled, to only have a view from the top
                enableRotation: false,
                // Don't zoom too much on smart zoom
                smartTravelHeightMax: 100000,
            },
        });
      }
 
      const debugMenu = new GuiTools("menuDiv", view);
      setupLoadingScreen(viewerDiv, view);

      const source = new itowns.VectorTilesSource({
        style: "mapbox://styles/mapbox/streets-v8",
        accessToken:
          "pk.eyJ1IjoiZnRvcm9tYW5vZmYiLCJhIjoiY2xrc2Zpa2o3MDQxNTNxcG5sczJyaTlncyJ9.5KFKdMLIiy-b_fAjSVhjCQ",
      });

      const layer = new itowns.ColorLayer("vector-map", {
        source,
        noTextureParentOutsideLimit: true,
        addLabelLayer: true,
      });

      view.addLayer(layer).then(() => {
        debugMenu.addLayerGUI.bind(debugMenu);
        itowns.ColorLayersOrdering.moveLayerToIndex(view, "vector-map", 15);
      });

      debug.createTileDebugUI(debugMenu.gui, view);
    </script>
  </body>
</html>
